import React, { Component } from 'react'

// 父传子通过属性，子传父通过回调函数
class Navbar extends Component {
    render() {
        let {event}=this.props
        return (
            <div style={{ background: 'red' }}>
                <button onClick={()=>{
                    // 执行父组件的回调
                    event();
                }}>点击</button>
                <span>Navbar</span>
            </div>
        )
    }
}
class Sidebar extends Component {
    render() {
        return (
            <div style={{ background: 'yellow',width:"200px" }}>
                <ul>
                    <li>Sidebar</li>
                    <li>Sidebar</li>
                    <li>Sidebar</li>
                    <li>Sidebar</li>
                    <li>Sidebar</li>
                    <li>Sidebar</li>
                    <li>Sidebar</li>
                    <li>Sidebar</li>
                    <li>Sidebar</li>
                    <li>Sidebar</li>
                    <li>Sidebar</li>
                    <li>Sidebar</li>
                </ul>
            </div>
        )
    }
}
export default class App extends Component {
    state={
        isshow:false
    }
    eventHandle=()=>{
        console.log("父组件");
        this.setState({
            isshow:!this.state.isshow
        })
    }
    render() {
        return (
            <div>
                <Navbar event={()=>this.eventHandle()}></Navbar>
                {/* <button onClick={()=>{this.setState({isshow:!this.state.isshow})}}>点击</button> */}
                {this.state.isshow&&<Sidebar></Sidebar>}
               
            </div>
        )
    }
}
